<template>
    <div style="max-width: 450px; margin: 0 auto;background-color: #f4f4f4; height: 100vh;">
        <div style="background-color: #008CA0; height: 3.5rem;"></div>
        <div>
            <van-nav-bar
            title="产品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <van-row justify="space-between" style="padding-left: 1rem; padding-right: 1rem; ">
            <van-col span="24" style="min-height: 10rem;margin-top: 1rem;padding: 1rem; border-radius: 10px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);">
                <van-row justify="space-between">
                    <van-col span="10">
                        <div style="padding-right: 1rem;" v-if="previcwUrl">
                            <van-image
                            :src="previcwUrl"
                            @click="imgViewsPre"
                            />
                        </div>
                        <div v-else style="text-align: center; line-height: 10rem; height: 10rem;">
                            暂无图片
                        </div>
                        
                    </van-col>
                    <van-col span="14">
                    <div style="display: inline-block;">
                    <div style="margin-bottom: 1rem;">{{ productDetail.title }}</div>
                    <div>编号：{{ productDetail.serial }}</div>
                    <div>规格：{{ productDetail.specs }} / {{ productDetail.unit }}</div>
                    <span>￥ {{ productDetail.price }}</span>
                    <div style="display: inline-block; margin-left: 1rem;">
                        <van-stepper v-model="num" @click="changeTotalNum"/>
                    </div>
                    <div>总价：{{ total }}</div>
                </div>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>
        <van-row justify="space-between" style="padding: 1rem;margin: 1rem;  border-radius: 10px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);">
            <van-col span="24" style="margin-top: 2rem; min-height: 10rem;padding-bottom: 1rem; border-bottom: 1px solid #008CA0;">
                <span style="font-size: 1.2rem;">产品简介</span>
                <div style="margin-top: 1rem;">{{ productDetail.introduct }}</div>
            </van-col>
            <van-col span="24" style="margin-top: 2rem; min-height: 10rem; padding-bottom: 1rem; border-bottom: 1px solid #008CA0;">
                <span style="font-size: 1.2rem;">使用说明</span>
                <div style="margin-top: 1rem;">{{ productDetail.explain }}</div>
            </van-col>
            <van-col span="24" style="margin-top: 2rem; min-height: 10rem; padding-bottom: 1rem; margin-bottom: 1.5rem;">
                <span style="font-size: 1.2rem;">储存方式</span>
                <div style="margin-top: 1rem;">{{ productDetail.storage }}</div>
            </van-col>        
        </van-row>
    </div>
    <van-action-bar>
    <!-- <van-action-bar-icon icon="chat-o" text="客服" @click="contractSale" /> -->
    <van-action-bar-icon icon="cart-o" text="购物车" :badge="userProductCount" @click="shoppingCar" />
    <van-action-bar-button type="warning" text="加入购物车" @click="orderProduct"/>
    <van-action-bar-button type="danger" text="立即购买" @click="buyNow" />
    </van-action-bar>
    <van-popup v-model:show="showShop" position="bottom" style="background-color: #1989FA; height: 3rem; line-height: 3rem; text-align: center;">加入购物车成功</van-popup>
    <van-popup v-model:show="showImgViews">
        <van-image
            width="100%"
            fit="contain"
            position="center"
            :src="imgViews"
            />
    </van-popup>
</template>


<script setup>
import { ref } from 'vue';
import { getProductById, getOrderProduct, productCount, userBuyNow} from '@/requests/index';
import { useRoute, useRouter } from "vue-router";
const srcList = ref([]);
const route = useRoute();
const router = useRouter();
const productId = route.query.id;
const previcwUrl = ref();
const num = ref(1)
const productDetail = ref({
    id: null,
    title: "",
    serial: "",
    price: 0,
    cover: "",
    img: "",
    introduct: "",
    explain: "",
    detail_file: "",
    recent_id: "",
    count: null,
    storage: "",
    specs: "",
    unit: "",
    inventory: null,
    category_info: "",
    second_category_id: null,
    file_url: ""
});
const showImgViews = ref(false);
const imgViews = ref();
const total = ref(0);
const showShop = ref(false);
const getProductDetail = async(id)=>{
    const res = await getProductById({"id": id});
    if (res.status === 2000){
        const data = res.data;
        const detail = data.data;
        productDetail.id = detail.id;
        productDetail.value.title = detail.title;
        productDetail.value.serial = detail.serial;
        productDetail.value.price = detail.price;
        productDetail.value.cover = detail.cover;
        productDetail.value.img = detail.img;
        productDetail.value.introduct = detail.introduct;
        productDetail.value.explain = detail.explain;
        productDetail.value.detail_file = detail.detail_file;
        productDetail.value.recent_id = detail.recent_id;
        productDetail.value.count = detail.count;
        productDetail.value.storage = detail.storage;
        productDetail.value.specs = detail.specs;
        productDetail.value.unit = detail.unit;
        productDetail.value.inventory = detail.inventory;
        productDetail.value.category_info = detail.category_info;
        productDetail.value.second_category_id = detail.second_category_id;
        total.value = detail.price * num.value;
        productDetail.value.file_url = detail.file_url;
        if ((detail.img_format).length > 0){
            previcwUrl.value = ((detail.img_format)[0]).url;
            imgViews.value = ((detail.img_format)[0]).url;
            srcList.value = [];
            detail.img_format.forEach(item => srcList.value.push(item.url));
        }
    }else{
        console.log("获取数据失败");
    }
};
getProductDetail(productId)

// 联系销售
const contractSale = ()=>{

};
// 购物车
const shoppingCar = ()=>{
    router.push({path: '/m/shopping'});
};
// 加入购物车
const orderProduct = async (id) =>{
    if (!window.localStorage.getItem("token")){
        router.push({ path: '/m/login' });
    }
    const res = await getOrderProduct({"id": productDetail.id, "count": 1});
    if (res.status === 2000){
        showShop.value = true;
        forProductCount();
        await sleep(1000);
        showShop.value = false;
    } else{
        router.push({ path: '/m/login' });
    }
};
// 立即购买
const buyNow = async()=>{
    if (window.localStorage.getItem("token")){
        const res = await userBuyNow({id: productId, num: num});
        if (res.status === 2000){
            // 跳转到我的订单页面
            router.push({path: "/m/order"});
        }else{
            console.log(res.msg)
        };        
    }else{
        router.push({path: "/m/login"});
    }
};
// 获取购物车产品总量
const userProductCount = ref(0);
const forProductCount = async()=>{
    if (window.localStorage.getItem("token")) {
        const res = await productCount();
        if (res.status === 2000){
            userProductCount.value = res.data;
        }else{
            console.log("获取用户购物车产品数量失败")
        }        
    } else{
        userProductCount.value = 0;
    }

};
forProductCount();
const onClickLeft = () => history.back();
const sleep =(ms) =>{
    return new Promise(resolve => setTimeout(resolve, ms));
};
// 计算总价
const changeTotalNum = (value)=>{
    total.value = productDetail.value.price * num.value;
};

// 预览图片
const imgViewsPre = ()=>{
    showImgViews.value=true;
}
</script>

<style scoped>

</style>